<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- <link rel="stylesheet" href="result.css"> -->
  <style>
    * {
      font-family: Arial, Helvetica, sans-serif;
    }

    .ut-flex {
      display: flex;
    }

    .ut-flex-1 {
      flex: 1 1 0%;
    }

    .ut-flex-auto {
      flex: 1 1 auto;
    }

    .ut-flex-initial {
      flex: 0 1 auto;
    }

    .ut-flex-none {
      flex: none;
    }

    .ut-flex-row {
      flex-direction: row;
    }

    .ut-flex-col {
      flex-direction: column;
    }

    .ut-flex-grow-0 {
      flex-grow: 0;
    }

    .ut-flex-grow {
      flex-grow: 1;
    }

    .ut-flex-shrink-0 {
      flex-shrink: 0;
    }

    .ut-flex-shrink {
      flex-shrink: 1;
    }

    .ut-justify-center {
      justify-content: center;
    }

    .ut-justify-between {
      justify-content: space-between;
    }

    .ut-justify-around {
      justify-content: space-around;
    }

    .ut-justify-evenly {
      justify-content: space-evenly;
    }

    .ut-items-center {
      align-items: center;
    }

    .ut-w-1-2 {
      width: 50%;
    }

    .ut-w-1-3 {
      width: cal(1/3);
    }

    .ut-w-1-4 {
      width: cal(1/4);
    }

    .ut-w-1-5 {
      width: cal(1/5);
    }

    .ut-w-1-6 {
      width: cal(1/6);
    }

    table.dataframe {
      border: none;
      border-collapse: collapse;
    }

    table.dataframe * {
      border: none;
    }

    table.dataframe thead tr:last-of-type {
      border-bottom: 1px solid #000;
    }

    table.dataframe thead {
      background: #0073c2;
      color: whitesmoke;
    }

    table.dataframe thead th {
      text-align: center;
    }

    table.dataframe td,
    table.dataframe th {
      padding: 0.3rem;
    }

    table.dataframe tbody tr {
      cursor: pointer;
      transition: 0.2s;
    }

    table.dataframe tbody tr:nth-of-type(2n) {
      background: lightgray;
    }

    table.dataframe tbody tr:hover {
      background: #d3eefd;
    }

    table.dataframe tbody tr td {
      text-align: center;
    }

    svg {
      width: 100%;
      overflow: visible;
    }
  </style>


  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.8.1"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>

</head>

<body>


  <div class="template">
    <h1>多图输出：</h1>

  </div>

  <div class="template">
    <h2>多图输出：</h2>

  </div>

  <div class="template">
    <p>这是一段md文字，<strong>粗体文字</strong>：</p>

  </div>

  <div class="template">
    <div>
      <div id="vis-e6050744-44f1-4263-958c-f463cc3c2414"></div>
      <script>
        (function (vegaEmbed) {
          var spec = {
            "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
            "config": {
              "view": {
                "continuousHeight": 300,
                "continuousWidth": 400
              }
            },
            "data": {
              "name": "data-f97058e015c125766f945a9329d8ba60"
            },
            "datasets": {
              "data-f97058e015c125766f945a9329d8ba60": [
                {
                  "name": "a",
                  "value": 1
                },
                {
                  "name": "b",
                  "value": 2
                },
                {
                  "name": "c",
                  "value": 3
                }
              ]
            },
            "hconcat": [
              {
                "description": "bar-x",
                "encoding": {
                  "x": {
                    "field": "name",
                    "type": "nominal"
                  },
                  "y": {
                    "field": "value",
                    "type": "quantitative"
                  }
                },
                "mark": "bar"
              },
              {
                "description": "bar-y",
                "encoding": {
                  "x": {
                    "field": "name",
                    "type": "nominal"
                  },
                  "y": {
                    "field": "value",
                    "type": "quantitative"
                  }
                },
                "mark": "bar"
              }
            ]
          };
          var embedOpt = { "mode": "vega-lite", renderer: "svg", actions: false };

          function showError(el, error) {
            el.innerHTML = ('<div class="error" style="color:red;">'
              + '<p>JavaScript Error: ' + error.message + '</p>'
              + "<p>This usually means there's a typo in your chart specification. "
              + "See the javascript console for the full traceback.</p>"
              + '</div>');
            throw error;
          }
          const el = document.getElementById('vis-e6050744-44f1-4263-958c-f463cc3c2414');
          vegaEmbed("#vis-e6050744-44f1-4263-958c-f463cc3c2414", spec, embedOpt)
            .catch(error => showError(el, error));
        })(vegaEmbed);

      </script>
    </div>
  </div>

  <div class="template">
    <div class="ut-flex">

      <div class="ut-flex-1 ut-flex ut-justify-center ut-items-center">
        <div id="vis-f8181b0a-01d0-433a-9b21-5241d8be6681"></div>
        <script>
          (function (vegaEmbed) {
            var spec = {
              "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
              "config": {
                "view": {
                  "continuousHeight": 300,
                  "continuousWidth": 400
                }
              },
              "data": {
                "name": "data-5cc1748cdf3d72316bbaa654fcde7626"
              },
              "datasets": {
                "data-5cc1748cdf3d72316bbaa654fcde7626": [
                  {
                    "date": "2021-06-19T15:43:21.506251",
                    "value": 1
                  },
                  {
                    "date": "2021-06-20T15:43:21.506251",
                    "value": 2
                  },
                  {
                    "date": "2021-06-21T15:43:21.506251",
                    "value": 3
                  }
                ]
              },
              "encoding": {
                "x": {
                  "field": "date",
                  "type": "temporal"
                },
                "y": {
                  "field": "value",
                  "type": "quantitative"
                }
              },
              "mark": "line"
            };
            var embedOpt = { "mode": "vega-lite", renderer: "svg", actions: false };

            function showError(el, error) {
              el.innerHTML = ('<div class="error" style="color:red;">'
                + '<p>JavaScript Error: ' + error.message + '</p>'
                + "<p>This usually means there's a typo in your chart specification. "
                + "See the javascript console for the full traceback.</p>"
                + '</div>');
              throw error;
            }
            const el = document.getElementById('vis-f8181b0a-01d0-433a-9b21-5241d8be6681');
            vegaEmbed("#vis-f8181b0a-01d0-433a-9b21-5241d8be6681", spec, embedOpt)
              .catch(error => showError(el, error));
          })(vegaEmbed);

        </script>
      </div>


    </div>
  </div>

  <div class="template">
    <div>
      <style type="text/css">
      </style>
      <table id="T_054c38a8_d0d2_11eb_999a_c858c009ba5f" class='dataframe'>
        <thead>
          <tr>
            <th class="blank level0"></th>
            <th class="col_heading level0 col0">name</th>
            <th class="col_heading level0 col1">value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th id="T_054c38a8_d0d2_11eb_999a_c858c009ba5flevel0_row0" class="row_heading level0 row0">0</th>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow0_col0" class="data row0 col0">a</td>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow0_col1" class="data row0 col1">1</td>
          </tr>
          <tr>
            <th id="T_054c38a8_d0d2_11eb_999a_c858c009ba5flevel0_row1" class="row_heading level0 row1">1</th>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow1_col0" class="data row1 col0">b</td>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow1_col1" class="data row1 col1">2</td>
          </tr>
          <tr>
            <th id="T_054c38a8_d0d2_11eb_999a_c858c009ba5flevel0_row2" class="row_heading level0 row2">2</th>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow2_col0" class="data row2 col0">c</td>
            <td id="T_054c38a8_d0d2_11eb_999a_c858c009ba5frow2_col1" class="data row2 col1">3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <script src="https://cdn.bootcdn.net/ajax/libs/rxjs/7.1.0/rxjs.umd.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/d3/7.0.0/d3.min.js"></script>

  <style>
    .alt_1 {
      opacity: 1;
    }

    .alt_2 {
      opacity: 0.5;
    }
  </style>

  <script>
    const sjEnter = new rxjs.Subject().pipe(
      // rxjs.operators.filter(d => d['name'] == 'a'),
    )

    const sjleave = new rxjs.Subject().pipe(
    )

    // dataframe
    const data = [
      { name: 'a', value: 1 },
      { name: 'b', value: 2 },
      { name: 'c', value: 3 },
    ]

    const cols = ['name', 'value']

    const table = d3.select('#T_054c38a8_d0d2_11eb_999a_c858c009ba5f')

    table.selectAll('tbody tr').data(data)
      .on('mouseenter', function (e) {
        const t = d3.select(this)
        sjEnter.next(t.datum())
      })
      .on('mouseleave', function (e) {
        const t = d3.select(this)
        sjleave.next(t.datum())
      })


    // chart
    // .role-frame .role-mark
    const marks = d3.selectAll('#vis-e6050744-44f1-4263-958c-f463cc3c2414  .role-mark *')
    sjEnter.subscribe(e => {
      const cond = (d) => d.datum['name'] == e['name']
      marks.filter(d => cond(d)).attr('class', 'alt_1')
      marks.filter(d => !cond(d)).attr('class', 'alt_2')
    })

    sjleave.subscribe(e => {
      marks.each(function(d){
        const n = d3.select(this).node()
        n.classList.remove('alt_1')
        n.classList.remove('alt_2')
      })
    })

  </script>

</body>

</html>